<template>
	<view>
		<view v-for="(item,index) in List" :key="item.path" v-if="status=='contact'&&type=='user'" class="contacts"
			@tap.stop.native="goPage(item.path)">
			<view class="left">
				<svg-icon :icon="item.icon" :width="48"></svg-icon>
				<text class="text-md-Regular">{{item.message}}</text>
			</view>
			<view class="right">
				<text class="text-sm-Regular time">{{item.time}}</text>
				<svg-icon icon="arrowRight" :width="32"></svg-icon>
			</view>
		</view>

		<view v-for="(item,index) in List" :key="item.path" v-if="status=='contact'&&type=='function'" class="contacts1"
			@tap="goPage(item.path)">
			<view class="function">
				<view class="left">
					<view style="height: 64rpx;">
						<svg-icon :icon="item.icon" :width="64" :border-radius="20"></svg-icon>
					</view>
					<text class="text-md-Regular">{{item.message}}</text>
				</view>
				<view class="right">
					<up-badge class="uni-badge-left-margin" :value="item.value" max="99" size="normal" />
					<svg-icon icon="arrowRight" :width="32" v-if="showRight"></svg-icon>
				</view>
			</view>
		</view>

		<view class="contacts2" v-if="status=='contact'&&type=='confirmbar'">
			<view class="left">
				<text class="text-sm-Regular" style="color: #A4A7AE;">{{info.title}}：</text><text
					class="text-sm-Medium"><text
						style="color: #2970FF;">{{info.select}}</text>/{{info.size}}{{info.unit}}</text>
			</view>
			<view class="right">
				<button class="btncolor" type="primary" size="mini" @tap.stop.native="handleClick()">
					<text class="text-xs-Medium">{{info.btext}}</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "List-contacts",
		props: {
			status: {
				type: String,
				default: ""
			},
			type: {
				type: String,
				default: ""
			},
			List: {
				type: Array,
				default: null
			},
			onClick: {
				type: Function
			},
			info: {
				type: Object,
				default: null
			},
			showRight: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {

			};
		},
		methods: {
			handleClick() {
				this.onClick();
			}
		},
		onLoad() {}
	}
</script>

<style lang="scss">
	.contacts {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 16px;

		.left {
			display: flex;
			align-items: center;
			gap: 8px;
			flex: 1;
		}

		.right {
			display: flex;
			align-items: center;
			gap: 4px;

			.time {
				color: $gray-400;
			}
		}
	}

	.contacts1 {
		width: 100%;

		.function {
			display: flex;
			justify-content: space-between;
			// border-bottom: 1rpx solid $gray-200;
			padding: 20rpx 32rpx;

			.left {
				display: flex;
				align-items: center;
				gap: 8px;
				flex: 1;
			}

			.right {
				display: flex;
				align-items: center;
				gap: 4px;

				.time {
					color: $gray-400;
				}
			}
		}
	}

	.contacts2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 0;

		.left {
			color: $gray-900;
		}

		.right {
			.btncolor {
				background-color: $brand-500;
				color: $white;
				padding: 8rpx 24rpx;
				border-radius: 40rpx;
				text-align: center;
				line-height: 36rpx;
				vertical-align: middle;
			}
		}
	}
</style>